<template>
    <vue-seamless-scroll
        :data="obj.imgTextBox"
        :class-option="optionLeft"
        class="seamless-warp2"
        :style="{
            height: floatLeft=='left'?obj.height+'px':(obj.height*3)+'px',
            width: floatLeft=='left'?'100%': obj.width+'px'}">
        <ul
            class="item clearfix"
            :style="{
                width: objWidth,
                height: objHeight}"
        >
            <li
                :style="{
                    width: obj.width+'px',
                    height: obj.height+'px',
                    padding: obj.padding+'px',
                    float: floatLeft}"
                v-for="(item, index) in obj.imgTextBox"
                :key="index">
                <img :src="item.imgUrl" >
            </li>
        </ul>
    </vue-seamless-scroll>
</template>
<style lang="scss" scoped>
    .seamless-warp2 {
        overflow: hidden;
        height: 150px;
        width: 100%;
        ul.item {
            li {
                background-color: #fff;
                width: 240px;
                height: 150px;
                position: relative;
                padding: 20px;
                box-sizing: border-box;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
    name: 'SeamImgScroll',
    components: {
        VueSeamlessScroll
    },
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {

        }
    },
    computed: {
        optionLeft() {
            return this.obj.classOptions
        },
        floatLeft() {
            if (this.obj.classOptions.direction == 2 || this.obj.classOptions.direction == 3) {
                return 'left'
            } else {
                return 'none'
            }
        },
        objHeight() {
            if (this.obj.classOptions.direction == 2 || this.obj.classOptions.direction == 3) {
                return this.obj.height + 'px'
            } else {
                return (this.obj.height * this.obj.imgTextBox.length) + 'px'
            }
        },
        objWidth() {
            if (this.obj.classOptions.direction == 2 || this.obj.classOptions.direction == 3) {
                return (this.obj.width * this.obj.imgTextBox.length) + 'px'
            } else {
                return this.obj.width + 'px'
            }
        }
    }
}
</script>
